<template>
  <el-row :gutter="10" style="margin-bottom: 10px">
    <!-- 第一个card -->
    <el-col :span="6">
      <el-card>
        <Detail title="总销售额" count="￥ 21414">
          <template slot="charts">
            <!-- 同日比 -->
            <span style="margin-right: 10px"
              ><i style="font-style: normal; margin-right: 10px">同日比</i
              >56.57%<i class="el-icon-caret-top" style="color: greenyellow"></i
            ></span>
            <!-- 日同比 -->
            <span
              ><i style="font-style: normal; margin-right: 10px">日同比</i
              >56.57%<i class="el-icon-caret-bottom" style="color: red"></i
            ></span>
          </template>
          <template slot="footer">
            <span>日销售额￥ 12445</span>
          </template>
        </Detail>
      </el-card>
    </el-col>
    <!-- 第二个card -->
    <el-col :span="6">
      <el-card>
        <Detail title="访问量" count="545435">
          <template slot="charts">
            <lineChart></lineChart>
          </template>
          <template slot="footer">
            <span>日访问量 124124</span>
          </template>
        </Detail>
      </el-card>
    </el-col>
    <!-- 第三个card -->
    <el-col :span="6">
      <el-card>
        <Detail title="支付笔数" count="543664">
          <template slot="charts">
            <barChart></barChart>
          </template>
          <template slot="footer">
            <span>转换率 67%</span>
          </template>
        </Detail>
      </el-card>
    </el-col>
    <!-- 第四个card -->
    <el-col :span="6">
      <el-card>
        <Detail title="运营活动效果" count="78%">
          <template slot="charts">
            <progressChart></progressChart>
          </template>
          <template slot="footer">
            <!-- 同日比 -->
            <span style="margin-right: 10px"
              ><i style="font-style: normal; margin-right: 10px">同日比</i
              >56.57%<i class="el-icon-caret-top" style="color: greenyellow"></i
            ></span>
            <!-- 日同比 -->
            <span
              ><i style="font-style: normal; margin-right: 10px">日同比</i
              >56.57%<i class="el-icon-caret-bottom" style="color: red"></i
            ></span>
          </template>
        </Detail>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import Detail from "./Detail";
//折线图
import lineChart from "./lineChart";
//柱状图
import barChart from "./barChart";
//进度条
import progressChart from "./progressChart";

export default {
  components: { Detail, lineChart, barChart, progressChart },
};
</script>

<style>
</style>